<template>
  <div class="my">
    <van-nav-bar title="个人中心" :fixed="true"></van-nav-bar>
    <div class="content">
      <div class="con-top" :style="{backgroundImage: `url(${userInfo.userBg})`}">
        <div class="van-uploader">
          <van-uploader :after-read="afterRead" preview-size="360" />
        </div>
        <div class="personalData" v-if="!isLogin" @click="toLogin">
          <img src="../assets/NoLogin.png" alt="" />
          <p class="nickname"><span>登录/注册</span>〉</p>
        </div>
        <div class="personalData" v-else @click="toPersonalData">
          <img :src="userInfo.userImg" alt="" />
          <p class="nickname"><span>{{userInfo.nickName}}</span>〉</p>
        </div>
        <div class="box">
          <div class="myorder" @click="toOrder">
              <van-icon name="orders-o" size="35" />
              <p>我的订单</p>
          </div>
          <div class="a"></div>
          <div class="myCollection" @click="toCollection">
              <van-icon name="like-o" size="35" />
              <p>我的收藏</p>
          </div>
          <div class="a"></div>
          <div class="coupon" @click="toCoupon">
              <van-icon name="coupon-o" size="35" />
              <p>优惠券</p>
          </div>
        </div>
      </div>
      <div class="con-bottom">
        <van-cell title="我的收货地址" is-link to="MyAddress"/>
        <van-cell title="安全中心" @click="toSafety" is-link />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data(){
      return{
        isLogin:true,
        userInfo:{
          nickName: '',
          userBg: '',
          userImg: ''
        }
      }
  },
  created(){
    this.getMy();
  },
  methods:{
    toLogin(){
      this.$router.push({name:'Login'})
    },
      toOrder(){
          this.$router.push({name:'Order'})
      },
      toPersonalData(){
        this.$router.push({name:'PersonalData'})
      },
      toCollection(){
        this.$router.push({name:'Collection'})
      },
      toCoupon(){
        this.$router.push({name:'Coupon'})
      },
      toSafety(){
        this.$router.push({name:'Safety'})
      },
      getMy(){
        this.axios({
          method:'get',
          url:'/findMy',
        }).then(result=>{

          if(result.data.code == 700){
            this.isLogin = false
          }
          if(result.data.code == 'A001'){
            this.userInfo = result.data.result[0]
          }
        })
      },
      afterRead(file){


        let imgType = file.file.type.split('/')[1]


        let serverBase64Img = file.content.replace(/data:image\/[A-Za-z]+;base64,/,'')

        this.axios({
          method:'post',
          url:'/updateUserBg',
          data:{
            imgType,
            serverBase64Img
          }
        }).then(result=>{

          if(result.data.code == 700){
            this.isLogin = false
            this.$toast('你还没有登录')
            return
          }
          if(result.data.code == 'Ioo1'){
            this.userInfo.userBg = result.data.userBg
          }
          location. reload()
        })
      }
  }
};
</script>

<style lang="less" scoped>
.my {
  // height: 667px;
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  .van-nav-bar--fixed{
    padding-top: 30px;
    background-color: #0022ab;
  }
  /deep/.van-nav-bar__title{
    color: #fff;
  }
  .content{
      .con-top{
          width: 100%;
          height: 210px;
          background-size: 100%;
          background-color: #ccc;
          background-repeat: no-repeat;
          position: relative;
          margin-bottom: 50px;
          .van-uploader{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity:0
          }
          .personalData{
              width: 60%;
              display: flex;
              align-items: center;
              position: absolute;
              top: 90px;
              left: 15px;
              img{
                  width: 70px;
                  height: 70px;
                  border-radius: 50%;
                  margin-right: 10px;
              }
              .nickname{
                font-size: 20px;
                  color: #fff;
                span{
                  margin-right: 10px;
              }
              }
          }
          .box{
              width: 90%;
              height: 80px;
              position: absolute;
              left: 18px;
              bottom: -40px;
              border-radius: 10px;
              background-color: #fff;
              box-shadow: 0 2px 2px 0 rgb(170, 170, 170);
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              text-align: center;
              .a{
                  width: 1px;
                  height: 50%;
                  background-color: #ddd;
              }
          }
      }
  }
}
</style>